/**
* 匠言知识付费v2.0.0
* Author: 山西匠言网络科技有限公司
* 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
* This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
*/
<template>
	<view class="container">
		<!-- 自定义底部start -->
		<view class="box">
			<view v-for="(item,index) in footerList" :key="index" class="nav" @click="handleChangeCurrentPage(item)">
				<view class="itemtt">
					<image class="img" v-if="item.footer_ind !=4 || !has_notReadMsg" :src="current_ind == item.footer_ind?item.icon2:item.icon" mode="aspectFit"></image>
					<uni-badge :text="dot_text" v-if="item.footer_ind ==4 && has_notReadMsg==true" type='error' size="small" absolute="rightTop"><image class="img" :src="current_ind == item.footer_ind?item.icon2:item.icon" mode="aspectFit"></image></uni-badge>
					<text class="texttt" :style="current_ind == item.footer_ind ? 'color:#4b89ff' : 'color:#9B9B9B'">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 自定义底部end -->
		<!-- 头部 -->
		<view class="header" :class="[{newheader:navBarFixed},{changebf:huifu}]"
			:style="{'background-color':swiper_bgcolor}">
			<!-- 分类 -->
			<view class="header-list">
				<scroll-view class="list" scroll-x="true">
					<view class="list-box">
						<view class="list-item" @click="getShoppingListInfo(0,0)">
							<!--   -->
							<view class="list-item-top" :class="[{fangda: 0 == current}, {newview: navBarFixed}]">推荐
							</view>
							<!--  -->
							<view class="list-item-bottom"
								:class="[{hengxian: 0 == current}, {newhengxian: navBarFixed}]"></view>
						</view>

						<view class="list-item" v-for="(item,index) in classifys" :key="index"
							@click="getShoppingListInfo(item.id,index+1)">
							<!--      -->
							<view class="list-item-top"
								:class="[{fangda: (index+1) == current}, {newview: navBarFixed}]">{{item.title}}</view>
							<!--  -->
							<view class="list-item-bottom"
								:class="[{hengxian: (index+1) == current}, {newhengxian: navBarFixed}]"
								style="transition: .3s"></view>
						</view>

					</view>
				</scroll-view>
				<view class="icon" @click="goListPage">
					<image v-if="!navBarFixed" src="../../../static/fenleixuanzhong.png" mode="aspectFit"></image>
					<image v-else src="../../../static/fenleixuanzhong1.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 搜索框 -->
			<view class="header-input">
				<image @click="postSearchCourse" class="search" src="../../../static/search.png" mode="aspectFit">
				</image>
				<input v-model.trim="keyword" class="seader-input" :class="{newinput: navBarFixed}" type="text"
					placeholder="请输入搜索内容" />
			</view>

		</view>



		<!-- 轮播图 -->
		<view class="swiper" :class="[{newheader:navBarFixed},{changebf:huifu}]"
			:style="{'background-color':swiper_bgcolor}">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular="true"
				@change="swiper_change">
				<swiper-item v-for="item in swipers" :key="item.id">
					<view class="swiper-item">
						<image :src="item.thumb" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view v-if="current == 0" class="">
			<!-- 图标 -->



			<!-- 热门推荐 -->
			<view class="hot">
				<view class="hot-top">
					<image src="../../../static/rementuijian.png" mode="aspectFit"></image>
					<view @click="declick('tj')">
						<text>换一批</text>
						<image :class="{an: isPlaying, pause: isPaused}" src="../../../static/huanyipi.png"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="hot-bottom">
					<view class="hot-bottom-list" v-for="(item, index) in hotList" :key="index"
						@click="goShopDetails(item.id)">
						<image :src="item.main_thumb" mode="aspectFit"></image>
						<text>￥{{item.price}}<text>￥{{item.oldprice}}</text></text>
						<view class="paiming">
							<image src="../../../static/paiming.png" mode="aspectFit"></image>
							<text>{{index + 1}}</text>
						</view>
					</view>
				</view>
			</view>



			<!-- 独家精选 -->
			<view class="dujia">
				<view class="dujia-top">
					<image src="../../../static/dujiajingxuan.png" mode="aspectFit"></image>
					<view @click="declick('jx')">
						<text>换一批</text>
						<image :class="{an: isPlaying1, pause: isPaused1}" src="../../../static/huanyipi.png"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="dujia-bottom">
					<view class="dujia-bottom-list" v-for="(item, index) in dujiaList" :key="index"
						@click="goShopDetails(item.id)">
						<image class="img" :src="item.main_thumb" mode="aspectFit"></image>
						<view class="span">
							<text class="span-top">{{item.name}}</text>
							<view class="span-bottom">
								<view class="span-bottom-left">
									<text>￥{{item.price}}</text>
									<text>￥{{item.oldprice}}</text>
								</view>
								<view class="span-bottom-right">马上抢 ></view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 抢先好货 物美价廉 -->
			<view class="text">
				<text>抢先好货 · 物美价廉</text>
				<text>一件也是批发价</text>
			</view>



			<!-- 底部商品列表 -->
			<view class="shop-list">
				<view class="shop-list-item" v-for="(item, index) in floorList" :key="index"
					@click="goShopDetails(item.id)">
					<image class="item-top" :src="item.main_thumb" mode="aspectFit"></image>
					<view class="item-bottom">
						<text class="title">{{item.name}}</text>
						<text class="content">热销{{item.sales}}件</text>
						<view class="price">
							<view class="price-left">
								<text>￥{{item.price}}</text>
								<text>￥{{item.oldprice}}</text>
							</view>
							<image class="price-right" src="../../../static/gouwuche.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>



		<view v-else class="">
			<!-- 列表 -->
			<view class="sonlist">
				<view class="sonlist-list">
					<view class="sonlist-list-item" v-for="(son_fl, index) in son_fls" :key="son_fl.id"
						@click="sonflCommodityList(son_fl.id)">
						<text>{{son_fl.title}}</text>
					</view>
					<view class="sonlist-list-item" v-if="son_fls.length != 0">
						<text>更多</text>
					</view>
					<!-- v-if="index >= 6" -->
					<!-- <view class="sonlist-list-item" v-if="son_fls.length >= 6">
								<image src="../../../static/xiangxia1.png" mode="aspectFit" style="width: 24upx; height: 16upx;"></image>
							</view> -->
				</view>
			</view>


			<!-- 商品列表 -->
			<view class="shop-list">
				<view @click="goShopDetails(item.id)" class="shop-list-item" v-for="item in commodityList"
					:key="item.id">
					<image class="item-top" :src="item.main_thumb" mode="aspectFit"></image>
					<view class="item-bottom">
						<text class="title">{{item.name}}</text>
						<text class="content">热销{{item.sales}}件</text>
						<view class="price">
							<view class="price-left">
								<text>￥{{item.price}}</text>
								<text>￥{{item.oldprice}}</text>
							</view>
							<image class="price-right" src="../../../static/gouwuche.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShoppingInfo,
		postDataList,
		postIndexGoods,
		postDhHyp
	} from '@/request/shopping.js'
	export default {
		data() {
			return {
				swiper_bgcolor: '#4b89ff',
				HOST_URL: uni.HOST_URL,
				current: 0,
				navBarFixed: false,
				huifu: false,
				classifys: [],
				swipers: [],
				son_fls: [],
				commodityList: [], // 商品列表
				hotList: [], // 热门推荐列表
				dujiaList: [], //独家精选列表
				floorList: [], // 最底部列表
				flid: '', // 这个变量用于传值
				isPlaying: false,
				isPaused: false,
				isPlaying1: false,
				isPaused1: false,
				page: 0,
				page1: 0,
				keyword: '',
				current_ind:2,
				footerList: [
					{
						icon: '../../../static/andy-ADTabbar/home.png',
						icon2: '../../static/andy-ADTabbar/home2.png',
						name: '首页',
						footer_ind: 1,
						page_route: '/pages/index/index'
					},
					{
						icon: '../../../static/andy-ADTabbar/shop.png',
						icon2: '../../../static/andy-ADTabbar/shop2.png',
						name: '商城',
						footer_ind: 2,
						page_route: '/pages/mall/shopping/shopping'
					},
					{
						icon: '../../../static/andy-ADTabbar/video.png',
						icon2: '../../static/andy-ADTabbar/video2.png',
						name: '精选',
						footer_ind: 3,
						page_route: '/pages/course-list/course-list'
					},
					{
						icon: '../../../static/andy-ADTabbar/msg.png',
						icon2: '../../static/andy-ADTabbar/msg2.png',
						name: '消息',
						footer_ind: 4,
						page_route: '/pages/message/message'
					},
					{
						icon: '../../../static/andy-ADTabbar/my.png',
						icon2: '../../static/andy-ADTabbar/my2.png',
						name: '我的',
						footer_ind: 5,
						page_route: '/pages/user/user'
					}
				],
				dot_text:0,
				has_notReadMsg:true
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if (userinfo.uid == '' || !userinfo.uid) {
				uni.navigateTo({
					url: '../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			} else {
				if (res.from === 'button') {

				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad() {
			getShoppingInfo().then(res => {
				// console.log(res)
				this.classifys = res.data.data.classify
				this.swipers = res.data.data.ads
			})
			postIndexGoods({
				goods_label: 'is_tj'
			}).then(res => {
				console.log(res)
				this.hotList = res.data.data
			})
			postIndexGoods({
				goods_label: 'is_jx'
			}).then(res => {
				console.log(res)
				this.dujiaList = res.data.data
			})
			postIndexGoods({
				goods_label: ''
			}).then(res => {
				console.log(res)
				this.floorList = res.data.data
			})
		},
		onShow() {
			this.dot_text = getApp().globalData.dot_text;
			
			let base_set = uni.getStorageSync('base_set')
			if(base_set.diypage.is_livetojx==1){
				this.footerList[2].name = '精选';
				this.footerList[2].page_route = '/pages/course-list/course-list';
			}
			// #ifdef MP
			if (base_set.smallapp.is_sh == 1) {
				this.footerList[2].name = '精选';
				this.footerList[2].page_route = '/pages/course-list/course-list';
			}
			// #endif
		},
		methods: {
			handleChangeCurrentPage(item) {
				uni.redirectTo({
					url: item.page_route
				})
			},
			//搜索
			postSearchCourse() {
				var keyword = this.keyword
				if (keyword == '') {
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					});
					return false
				} else {

					uni.navigateTo({
						url: `/pages/mall/commodity-listse/commodity-listse?keyword=${keyword}`
					});
				}
			},
			declick(type) {

				if (type == 'tj') {
					this.isPlaying = true
					console.log('loading')
					this.isPaused = false
					setTimeout(() => {
						var data = {
							page: this.page,
							type: type ? type : ''
						}
						postDhHyp(data).then(res => {
							console.log(res.data)
							if (res.data.code == 0) {
								this.hotList = res.data.data
							}
						})
						console.log('end')
						this.isPaused = true
					}, 1500)
					this.page++
				} else if (type == 'jx') {
					this.isPlaying1 = true
					console.log('loading')
					this.isPaused1 = false
					setTimeout(() => {
						var data = {
							page: this.page1,
							type: type ? type : ''
						}
						postDhHyp(data).then(res => {
							console.log(res.data)
							if (res.data.code == 0) {
								this.dujiaList = res.data.data
							}
						})
						console.log('end')
						this.isPaused1 = true
					}, 1500)
					this.page1++
				}
			},
			// 去列表页面
			goListPage() {
				uni.navigateTo({
					url: `/pages/list-page/list-page?goodstype=mall`
				});
			},
			// 去商品详情页
			goShopDetails(id) {
				uni.navigateTo({
					url: `/pages/mall/shop-details/shop-details?id=${id}`
				});
			},
			// 获取商品列表信息
			getShoppingListInfo(id, key) {
				this.current = key
				this.flid = id
				postDataList({
					flid: id
				}).then(res => {
					console.log(res)
					this.son_fls = res.data.data.son_fl
					this.commodityList = res.data.data.lists
				})
			},
			sonflCommodityList(sonid) {
				uni.navigateTo({
					url: `/pages/mall/commodity-list/commodity-list?flid=${this.flid}&sonflid=${sonid}&goodstype=mall`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './shopping.less';
	@import './classitys.less';

	@keyframes rotation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(720deg);
		}
	}
	.maxWidth{flex:1;}
	.an {
		animation: rotation 2s infinite linear;
	}

	.pause {
		animation-play-state: paused;
	}
</style>
